<template>
	<view class="Product_list">
		<view class="Product_listBox" style="padding-top: 224upx;">
			
			<view class="top_nav_wrap">
				<view class="searchBox">
					<view class="searchBoxT">
						<image src="../../static/mine/search_ico.png"></image>
						<input type="text" placeholder="请输入" v-model="searchVal" />
					</view>
					<view class="searchBoxB" @click="searchBtn">搜索</view>
				</view>
				<view class="screenBox">
					<view class="screen-top">
						<view class="screen-nav" :class="{navColor:currentNav==index}" v-for="(item,index) in navList" @click="selectNav(index)">{{item.name}}</view>
					</view>
					<view class="screen-Bottom">
						<view class="screenItem" v-for="(item,index) in screenList" @click="selectScreen(index)">
							<view class="screenName" :class="{screenColor:screenIndex==index}">{{item.name}}</view>
							<view v-if="screenIndex==index">
								<u-icon name="arrow-down" color="#FFAC3F" size="20"></u-icon>
							</view>
							<view v-else>
								<u-icon name="arrow-down" color="#BFBFBF" size="20"></u-icon>
							</view>
						</view>
						<picker mode="multiSelector" :range="districtList" @change="choiceDistrict" range-key="name" @columnchange="areaChange">
							<view class="screenItem">
								<view class="screenName">商圈</view>
								<view>
									<u-icon name="arrow-down" color="#BFBFBF" size="20"></u-icon>
								</view>
							</view>
						</picker>
					</view>
				</view>
			</view>
			<view class="ProductBox" v-if="list.length>0">
				<view class="ProductItem" v-for="(item,index) in list" :key="index" @click="toFoodDetails" :data-id="item.id" v-if="currentNav==0">
					<view class="ItemTop">
						<view class="ProductImage" :style="{'background-image':'url('+getImage(item.image_url)+')'}">
							<!-- <image :src="getImage(item.image_url)" mode=""></image> -->
						</view>
						<view class="ProductInfo">
							<view class="ProductNameBox">
								<view class="ProductName">{{item.name}}</view>
								<view class="sales-volume">售{{item.sales_volume_sum}}</view>
							</view>
							<view class="addressBox">
								<view class="address">{{item.industry.name}}</view>
								<view class="addressNum">{{item.juli}}km</view>
							</view>
							<!-- <view class="ranking">番禺区西式快餐第1名</view>. -->
							<!-- <view class="evaluateBox">
								<view class="evaluateItem" v-for="(item,index) in 2">“太好吃了！”</view>
							</view> -->
						</view>
					</view>
					<view class="ItemBottom" v-if="item.ShopPackageRelation.length>0">
						<view class="couponBox" v-for="(pitem,pindex) in item.ShopPackageRelation" :key="pindex" v-if="pindex<2&&pitem.ShopPackage">
							<view class="couponIcon">惠</view>
							<view class="couponPrice">{{pitem.ShopPackage?pitem.ShopPackage.money:0}}元</view>
							<view class="coupontext">{{pitem.ShopPackage?pitem.ShopPackage.name:"无"}}</view>
						</view>
					</view>
				</view>
				<view class="DiscountItem" v-for="(item,index) in list" :key="index" @click="toOfferDetails" v-if="currentNav==1" :data-id="item.id">
					<view class="Item_top">
						<view class="ItemImage" :style="{'background-image':'url('+getImage(item.title_image)+')'}">
							<!-- <image :src="getImage(item.title_image)" mode=""></image> -->
						</view>
						<view class="Iteminfo">
							<view class="info_top" style="margin-bottom: 0;">
								<view class="NameBox">
									<view class="Name">{{item.name}}</view>
									<!-- <view class="titmes">周一至周日|免预约</view> -->
								</view>
								<view class="buyBox" v-if="item.num>0||item.stock_num==0">抢购</view>
								<view class="buyBox" style="background: #BBBBBB;color:#fff" v-else>售罄</view>
								
							</view>
							<view class="priceBox" style="margin-top: 10upx;margin-bottom: 10upx;">
								<view class="volume" style="color: #333333;">{{item.shopObj.Shop.name}}</view>
								<view class="volume" style="color: #333333;">{{item.shopObj.distance}}km</view>
							</view>
							<view class="priceBox">
								<view class="price">￥{{item.money}}<text style="margin-left: 8upx;text-decoration: line-through;color:#999;font-size: 16upx;">￥{{item.oldMoney}}</text></view>
								<view class="volume">售{{item.sales_volume}}</view>
							</view>
						</view>
					</view>
					<view class="Item_bottom">
						<view class="share">
							<!-- #ifdef APP -->
							分享用户可赚取{{item.user_commission_money}}元；
							<!-- #endif -->
						</view>
						<view class="surplus" v-if="item.stock_num==0">不限量</view>
						<view class="surplus" v-else>仅剩:<text style="color:#FF5555">{{item.num}}</text>份</view>
					</view>
				</view>
			</view>
			<view style="padding-top: 200upx;" v-else>
				<u-empty text="暂无数据" mode="list"></u-empty>
			</view>
			
		</view>
		<!-- 下拉框开始 -->
		<view class="popupBox">
			<u-popup v-model="isScreen" mode="bottom">
				<view class="popupList">
					<view class="popupItem" v-for="(item,index) in popupList" @click="popupItem(index)">
						<view class="popupName" :class="{currentColor:currentIndex==index}">{{item.name}}</view>
						<view v-if="currentIndex==index">
							<u-icon name="checkbox-mark" color='#FFAC3F'></u-icon>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		<!-- 下拉框结束 -->
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				searchValue:"",
				screenList:[{name:"上新优先"}],
				navList:[{name:"优选门店"},{name:"超值套餐"}],
				currentNav:0,
				screenIndex:0,
				popupList:[{name:"上新优先"},{name:"距离优先"}],
				currentIndex:0,
				isScreen:false,
				cityId:"",
				industryId:"",
				districtList:[[],[]],
				searchVal:"",
				list:[],
				page:1,
				moreFlag:false,
				businessObj:{}
			}
		},
		onReachBottom() {
			if(!this.moreFlag){
				return false;
			}
			this.moreFlag = false;
			this.page = this.page + 1;
			this.getList();
		},
		// 跳转地图
		onNavigationBarButtonTap(e) {
			uni.switchTab({
				url:"/pages/pagethree/pages/Map/Map"
			})
		},
		// 搜索框
		onNavigationBarSearchInputConfirmed(e){
			console.log(e.text);
			this.searchValue = e.text;
		},
		onLoad(options) {
      // #ifdef APP-PLUS
      var args = plus.runtime.arguments;
      if(args){
        app.$vm.setShareDetail(args);
      }
      // #endif
			if(this.currentNav==0){
				uni.setNavigationBarTitle({
					title:"店铺列表"
				})
			}else{
				uni.setNavigationBarTitle({
					title:"商品列表"
				})
			}
			if(options.cityid){
				this.cityId = options.cityid;
			}else{
				this.cityId = uni.getStorageSync(cityData).id;
			}
			
			this.industryId = options.id;
			this.getArea();
			if(app.$vm.globalData.latitude){
				this.getList();
			}else{
				Promise.all([app.$vm.indexInitFun()]).then(res=>{
					this.getList();
				})
			}
		},
		methods: {
			getImage(url){
				if(url&&(url.indexOf("http://")!=-1||url.indexOf("https://")!=-1)){
					return url;
				}else{
					return app.$vm.globalData.imgBaseUrl + url;
				}
			},
			getList(){
				if(this.currentNav==0){
					
					let obj = {};
					obj.city_id = this.cityId;
					obj.longitude = app.$vm.globalData.longitude;
					obj.dimension = app.$vm.globalData.latitude;
					if(this.currentIndex==1){
						obj.juli = 1;
					}
					obj.industry_id = this.industryId;
					if(this.businessObj.id){
						obj.business_areas_id = this.businessObj.id;
					}
					if(this.searchVal.trim()){
						obj.search = this.searchVal;
					}
					let newObj = {};
					newObj.page = this.page;
					newObj.data = obj;
					
					this.$u.api.shopList(newObj).then(res=>{
						console.log(res)
						if(this.page==1){
							this.list = res.data.list.data.map(cur=>{
								cur.juli = (Math.round(cur.juli*100)/100).toFixed(2);
								return cur;
							});
						}else{
							this.list = this.list.concat(res.data.list.data.map(cur=>{
								cur.juli = (Math.round(cur.juli*100)/100).toFixed(2);
								return cur;
							}));
						}
						if(this.page<res.data.list.last_page){
							this.moreFlag = true;
						}else{
							this.moreFlag = false;
						}
					})
				}else{
					let obj = {};
					obj.city_id = this.cityId;
					if(this.currentIndex==1){
						obj.juli = 1;
						obj.longitude = app.$vm.globalData.longitude;
						obj.dimension = app.$vm.globalData.latitude;
					}
					if(this.currentIndex==2){
						obj.money = 1;
					}
					if(this.currentIndex==3){
						obj.money = 2;
					}
					obj.industry_id = this.industryId;
					if(this.businessObj.id){
						obj.business_areas_id = this.businessObj.id;
					}
					if(this.searchVal.trim()){
						obj.search = this.searchVal;
					}
					let newObj = {};
					newObj.page = this.page;
					newObj.data = obj;
					
					this.$u.api.shopPackageGetList(newObj).then(res=>{
						console.log(res)
						if(this.page==1){
							this.list = res.data.list.data.map(cur=>{
								cur.ShopPackageRelation = cur.ShopPackageRelation.map(pcur=>{
									let dis = app.$vm.getDistance(Number(pcur.Shop.dimension),Number(pcur.Shop.longitude));
									pcur.distance = dis;
									return pcur;
								})
								cur.limit_time = JSON.parse(cur.limit_time);
								if(cur.package_title){
									let arr = JSON.parse(cur.package_title);
									let pArr = [];
									for(let i=0;i<arr.length;i++){
										let price = 0;
										if(arr[i].conList){
											for(let j=0;j<arr[i].conList.length;j++){
												price = price + Number(arr[i].conList[j].price);
											}
										}
										pArr.push(price);
									}
									let money = pArr.length>0?pArr[0]:0;
									for(let i=0;i<pArr.length;i++){
										if(money<pArr[i]){
											money = pArr[i];
										}
									}
									cur.oldMoney = money;
								}else{
									cur.oldMoney = 0;
								}
								return cur;
							});
						}else{
							this.list = this.list.concat(res.data.list.data.map(cur=>{
								cur.ShopPackageRelation = cur.ShopPackageRelation.map(pcur=>{
									let dis = app.$vm.getDistance(Number(pcur.Shop.dimension),Number(pcur.Shop.longitude));
									pcur.distance = dis;
									return pcur;
								})
								cur.limit_time = JSON.parse(cur.limit_time);
								console.log(cur.package_title)
								if(cur.package_title){
									let arr = JSON.parse(cur.package_title);
									let pArr = [];
									for(let i=0;i<arr.length;i++){
										let price = 0;
										if(arr[i].conList){
											for(let j=0;j<arr[i].conList.length;j++){
												price = price + Number(arr[i].conList[j].price);
											}
										}
										pArr.push(price);
									}
									let money = pArr.length>0?pArr[0]:0;
									for(let i=0;i<pArr.length;i++){
										if(money<pArr[i]){
											money = pArr[i];
										}
									}
									cur.oldMoney = money;
								}else{
									cur.oldMoney = 0;
								}
								return cur;
							}));
						}
						this.list = this.list.map(cur=>{
							let obj = {};
							for(let i=0;i<cur.ShopPackageRelation.length;i++){
								if(i==0){
									obj = cur.ShopPackageRelation[i];
								}else{
									if(cur.ShopPackageRelation[i].distance<obj.distance){
										obj = cur.ShopPackageRelation[i];
									}
								}
							}
							cur.shopObj = obj;
							return cur;
						})
						if(this.page<res.data.list.last_page){
							this.moreFlag = true;
						}else{
							this.moreFlag = false;
						}
					})
				}
			},
			choiceDistrict(e){
				console.log(e)
				if(e.detail.value[0] == 0){
					this.businessObj = {};
				}else{
					this.businessObj = this.districtList[1][e.detail.value[1]];
				}
				this.page = 1;
				this.getList();
			},
			areaChange(e){
				console.log(e)
				if(e.detail.column==0){
					if(e.detail.value==0){
						this.districtList.splice(1,1,[{name:"全部",id:-1}]);
					}else{
						this.getDistrict(this.districtList[0][e.detail.value].id);
					}
				}
			},
			getArea(){
				let obj = {};
				obj.area_parent_id = this.cityId;
				this.$u.api.areaList1(obj).then(res=>{
					res.data.list.unshift({name:"全部",id:-1})
					this.districtList.splice(0,1,res.data.list);
					this.districtList.splice(1,1,[{name:"全部",id:-1}]);
				})
			},
			getDistrict(id){
				let obj = {};
				obj.did = id;
				this.$u.api.businessAreasList({data:obj}).then(res=>{
					this.districtList.splice(1,1,res.data.list);
				})
			},
			toOfferDetails(e){
				let id = e.target.dataset.id || e.currentTarget.dataset.id;
				uni.navigateTo({
					url:"/pages/pagethree/pages/OfferDetails/OfferDetails?id="+id
				})
			},
			toFoodDetails(e){
				let id = e.target.dataset.id || e.currentTarget.dataset.id;
				uni.navigateTo({
					url:"/pages/pagetwo/pages/FoodDetails/FoodDetails?id="+id
				})
			},
			popupItem(index){
				this.currentIndex= index
				this.isScreen = false
				this.screenList[0] = this.popupList[index];
				this.getList();
			},
			selectScreen(index){
				this.screenIndex = index
				this.isScreen = true
			},
			selectNav(index){
				if(index==0){
					this.popupList = [{name:"上新优先"},{name:"距离优先"}]
				}else{
					this.popupList = [{name:"上新优先"},{name:"距离优先"},{name:"价格升序"},{name:"价格降序"}]
				}
				this.currentNav = index;
				if(this.currentNav==0){
					uni.setNavigationBarTitle({
						title:"店铺列表"
					})
				}else{
					uni.setNavigationBarTitle({
						title:"商品列表"
					})
				}
				this.screenIndex = 0;
				this.list = [];
				this.getList();
			},
			//搜索
			searchBtn(){
				// alert(this.searchValue)
				console.log(this.searchVal)
				this.page = 1;
				this.getList();
			},
			//清空搜索框
			emptyBtn(){
				this.searchValue = ""
			},
			//返回
			goBack(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.searchBox{
		width: 100%;
		height: 88upx;
		display: flex;
		align-items: center;
		background: white;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 24upx;
	}
	.searchBoxT{
		width: calc(100% - 80upx);
		height: 60upx;
		box-sizing: border-box;
		border: 2upx solid #FFAC3F;
		border-radius: 30upx;
		display: flex;
		align-items: center;
		padding: 0 32upx;
	}
	.searchBoxB{
		font-size: 28upx;
		line-height: 60upx;
		color: #333333;
	}
	.searchBoxT>image{
		width: 32upx;
		height: 32upx;
		margin-right: 8upx;
	}
	.searchBoxT>input{
		width: calc(100% - 40upx);
		height: 56upx;
		line-height: 56upx;
		font-size: 24upx;
	}
	
	
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}
.Product_list{
	background-color: #F3F3F3;
	min-height: 100vh;
	overflow: auto;
	
	.Product_listBox{
		.top_nav_wrap{
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;
			background-color: #FFFFFF;
			.searchBox{
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 750upx;
				height: 88upx;
				padding: 16upx 24upx;
				.arrowBox{
					display: flex;
					align-items: center;
					.arrowName{
						font-size: 28upx;
						font-family: xiaowei;
						font-weight: 400;
						color: #333333;
						margin-left: 8upx;
					}
				}
				.inputBox{
					display: flex;
					align-items: center;
					// justify-content: space-between;
					flex: 1;
					height: 60upx;
					background: #FFFFFF;
					border: 2upx solid #FFAC3F;
					opacity: 1;
					border-radius: 34upx;
					padding: 14upx 32upx;
					input{
						width: calc(100% - 70upx);
						font-size: 24upx;
						margin-left: 8upx;
					}
					.closeBox{
						display: flex;
						justify-content: center;
						align-items: center;
						width: 24upx;
						height: 24upx;
						border-radius: 50%;
						background-color: #BFBFBF;
					}
				}
				.MapBox{
					.MapIcon{
						width: 32upx;
						height: 32upx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.MapName{
						font-size: 20upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
						margin-top: 4upx;
					}
				}
			}
			.screenBox{
				// position: fixed;
				// top: 88upx;
				width: 750upx;
				height: 136upx;
				padding: 0 24upx;
				// background-color: #fff;
				.screen-top{
					display: flex;
					align-items: center;
					.screen-nav{
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #333333;
						margin-right: 48upx;
						padding: 8upx 0;
					}
					.navColor{
						border-bottom: 5upx solid #FFAC3F;
						color: #FFAC3F;
					}
				}
				.screen-Bottom{
					display: flex;
					align-items: center;
					// margin-top: 32upx;
					padding: 24upx 0;
					.screenItem{
						display: flex;
						align-items: center;
						margin-right: 72upx;
						.screenName{
							font-size: 20upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #666666;
							margin-right: 8upx;
						}
						.screenColor{
							color: #FFAC3F;
						}
					}
				}
			}
		}
		.ProductBox{
			padding: 16upx 24upx;
			.ProductItem{
				width: 702upx;
				background: #FFFFFF;
				opacity: 1;
				border-radius: 20upx;
				padding: 24upx;
				margin-bottom: 16upx;
				.ItemTop{
					display: flex;
					border-bottom: 2upx solid #F5F5F5;
					padding-bottom: 16upx;
					.ProductImage{
						width: 144upx;
						height: 144upx;
						border-radius: 8upx;
						// background-color: #FFAC3F;
						margin-right: 24upx;
						background-position: center;
						background-size: cover;
						image{
							width: 100%;
							height: 100%;
							border-radius: 8upx;
						}
					}
					.ProductInfo{
						width: calc(100% - 168upx);
						.ProductNameBox{
							display: flex;
							align-items: center;
							justify-content: space-between;
							.ProductName{
								font-size: 24upx;
								font-family: Source Han Sans CN;
								font-weight: bold;
								color: #333333;
							}
							.sales-volume{
								font-size: 16upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #FF8255;
							}
						}
						.addressBox{
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-top: 16upx;
							.address{
								font-size: 16upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #999999;
							}
							.addressNum{
								font-size: 16upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #999999;
							}
						}
						.ranking{
							width: auto;
							// width: 130upx;
							// height: 28upx;
							background: #FFF3C8;
							opacity: 1;
							border-radius: 8upx;
							padding: 8upx;
							font-size: 12upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #683B00;
							margin-top: 12upx;
							display: inline-block;
						}
						.evaluateBox{
							display: flex;
							align-items: center;
							flex-wrap: wrap;
							margin-top: 16upx;
							.evaluateItem{
								// width: 100px;
								// height: 20px;
								background: #FFF5EA;
								opacity: 1;
								border-radius: 8upx;
								padding:4upx 8upx;
								font-size: 12upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #FFAC3F;
								margin-right: 16upx;
								margin-bottom: 16upx;
							}
						}
					}
				}
				.ItemBottom{
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					padding-top: 16upx;
					.couponBox{
						display: flex;
						align-items: center;
						margin-right: 64upx;
						margin-top: 24upx;
						.couponIcon{
							width: 28upx;
							height: 28upx;
							background: #FFAC3F;
							opacity: 1;
							border-radius: 8upx;
							text-align: center;
							line-height: 28upx;
							font-size: 16upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #FFFFFF;
						}
						.couponPrice{
							font-size: 16upx;
							font-family: Source Han Sans CN;
							font-weight: 500;
							color: #FFAC3F;
							margin-left: 8upx;
						}
						.coupontext{
							font-size: 16upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
							margin-left: 8upx;
						}
					}
					.couponBox:nth-child(2n+2){
						margin-right: 0;
					}
					.couponBox:nth-child(1){
						margin-top: 0;
					}
					.couponBox:nth-child(2){
						margin-top: 0;
					}
				}
			}
			.DiscountItem{
				width: 702upx;
				background: #FFFFFF;
				box-shadow: 0 0 12upx rgba(0, 0, 0, 0.16);
				opacity: 1;
				padding: 16upx;
				margin-bottom: 24upx;
				.Item_top{
					display: flex;
					padding-bottom: 16upx;
					border-bottom: 2upx solid #F5F5F5;
					.ItemImage{
						width: 112upx;
						height: 112upx;
						border-radius: 8upx;
						overflow: hidden;
						// background-color: #F0AD4E;
						margin-right: 16upx;
						background-position: center;
						background-size: cover;
						image{
							width: 100%;
							height: 100%;
							border-radius: 8upx;
						}
					}
					.Iteminfo{
						width: calc(100% - 128upx);
						.info_top{
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-bottom: 16upx;
							.NameBox{
								.Name{
									font-size: 20upx;
									font-family: Source Han Sans CN;
									font-weight: 400;
									color: #333333;
									margin-bottom: 16upx;
								}
								.titmes{
									font-size: 16upx;
									font-family: Source Han Sans CN;
									font-weight: 400;
									color: #999999;
								}
							}
							.buyBox{
								width: 96upx;
								height: 56upx;
								background: linear-gradient(180deg, #FFAC3F 0%, #FC8643 100%);
								opacity: 1;
								border-radius: 28upx;
								font-size: 24upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								line-height: 56upx;
								text-align: center;
								color: #FFFFFF;
							}
						}
						.priceBox{
							display: flex;
							justify-content: space-between;
							align-items: center;
							.price{
								font-size: 20upx;
								font-family: Source Han Sans CN;
								font-weight: bold;
								color: #FFAC3F;
							}
							.volume{
								font-size: 16upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #D0D0D0;
							}
						}
					}
				}
				.Item_bottom{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 16upx 0;
					.share{
						font-size: 16upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
					}
					.surplus{
						font-size: 16upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
					}
				}
			}
		}
	}
	.popupBox{
		.popupList{
			padding: 32upx 24upx;
			.popupItem{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 32upx 0;
				.popupName{
					font-size: 24upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}
				.currentColor{
					font-size: 24upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FFAC3F;
				}
			}
		}
	}
}
</style>
